<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
<!--				<el-button type="primary" @click="add">新增</el-button>-->
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-form inline v-model="search" label-position="right">
						<el-form-item label="关键词">
							<template #label>
								<el-select v-model="search.page_type" clearable>
									<el-option :label="t.label" :value="t.value" v-for="(t,i) in pageTypeArray" :key="i"></el-option>
								</el-select>
							</template>
							<el-input v-model="search.keyWord" placeholder="请输入名称、标题等关键词" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTableGdshop ref="table" tableName="goodsTable" :apiObj="apiObj" stripe remoteSort remoteFilter :column="tableColumn">
				<template #is_activated="scope">
					<el-tooltip effect="dark" content="点击切换状态" placement="left">
						<el-button
							type="success"
							plain
							v-if="scope.row.is_activated == 1"
							@click="setActivated(scope.row)"
							size="small"
						>激活</el-button
						>
						<el-button type="warning" size="small" plain v-else @click="setActivated(scope.row)"
						>停用</el-button
						>
					</el-tooltip>
				</template>
				<template #page_type="scope">
					{{ getPageType(scope.row.page_type)}}
				</template>

				<template #status="scope">
					{{ getStatus(scope.row.status) }}
				</template>

				<el-table-column label="操作" fixed="right" align="center" width="100">
					<template #default="scope">
						<el-button type="text" size="mini" @click="toPreviewUrl(scope.row)"
								   v-copy="'/#/pages/index/preview?id=' + scope.row.id"
						>预览</el-button
						>
						<el-button type="text" size="mini" @click="toPageItem(scope.row)"
						>设计</el-button
						>
					</template>
				</el-table-column>
			</scTableGdshop>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "diy-page-index",
	data() {
		return {
			apiObj: this.$API.shop.diyPage,
			search: {
				keyWord: '',
				page_type: '',
			},
			pageTypeArray: [
				{
					label: "首页",
					value: 1
				},
				{
					label: "商品详情",
					value: 2
				},
				{
					label: "我的",
					value: 3
				}
			],
			tableColumn: [
				{
					prop: "page_name",
					label: "标题",
					align: "left"
				},
				{
					prop: "page_type",
					label: "页面类型",
					align: "left"
				},
				{
					prop: "is_activated",
					label: "激活",
					align: "center",
				},
				{
					prop: "status",
					label: "状态",
					align: "center",
				},
			],
		}
	},
	methods: {
		tableRefresh(isClaer = false) {
			if (isClaer === true) {
				this.search.keyWord = '';
			}
			this.$refs.table.refresh();
		},
		//搜索
		upsearch(){
			this.$refs.table.upData(this.search)
		},
		getPageType(val) {
			let type = '';
			this.pageTypeArray.forEach(item => {
				if (item.value == val) {
					type = item.label;
				}
			});
			return type;
		},
		getStatus(val) {
			if (val === 1) {
				return '启用';
			}

			return '禁用';
		},
		setActivated(_row) {
			let _this = this;
			_this.$confirm("确定要切换状态吗?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				_this.$API.shop.diyPage
					.setActivated({ id: _row.id })
					.then((res) => {
						if (res.code === 0) {
							_this.$message.success("操作成功");
							_this.tableRefresh();
						} else {
							_this.$message.error(res.message);
						}
					})
					.catch((err) => {
						console.log(err);
					});
			}).catch(() => {

			});
		},
		toPreviewUrl() {
			this.$message.success("请自行拼接域名");
		},
		toPageItem(_row) {
			this.$router.push("/shop/diyPage/itemList?page_id=" + _row.id);
			this.$route.title = '页面设计 - ' + _row.page_name
		}
	}
}
</script>

<style scoped>

</style>
